<!--
 * @Author: your name
 * @Date: 2021-09-12 09:54:22
 * @LastEditTime: 2021-09-20 09:40:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\components\upload\expxlsx.vue
-->
<template>
    <div>
        <Button @click="ExpXlsx"><slot></slot></Button>
        <BaseicModal
            title="导出"
            icon="excel"
            :visible="visible"
            @handleclick="handleclick"
        >
            <div class="fromRow">
                <div class="fromRow_Col">
                    <span>输入导出名称</span>
                    <span><Input v-model:value="text" placeholder="请输入内容" /></span>
                </div>
                <div class="fromRow_Col">
                    <span>选择输出格式</span>
                    <span>
                        <InputGroup compact>
                            <Select default-value="Xlsx" @change="handleChange">
                                <SelectItem
                                    v-for="(item, index) in schma"
                                    :key="index"
                                    :value="item.value"
                                >
                                    {{ item.name }}
                                </SelectItem>
                            </Select>
                        </InputGroup>
                    </span>
                </div>
            </div>
        </BaseicModal>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Button,Input,Select, } from 'ant-design-vue'
import BaseicModal from '../Modal/Modalwarp.vue'
import { useMassage } from '../../ntils/hooks'

export default defineComponent({
    name: 'Expxlsx',
    components: { 
        
        Button,
         BaseicModal,
         Input,
         InputGroup:Input.Group,
         Select,
         SelectItem:Select.Option,


         },
    emits: ['handleOk'],
    setup(_, { emit }) {
        let { createMessage } = useMassage()
        let schma = [
            {
                name: 'XLsx',
                value: 'xlsx',
            },
            {
                name: 'Txt',
                value: 'txt',
            },
            {
                name: 'Html',
                value: 'html',
            },
        ]
        let visible = ref<Boolean>(false)
        let bookType = ref<String>()
        let text = ref<String>()
        bookType.value = 'xlsx'
        let handleclick = (e) => {
            if (e == 'cancel') {
                visible.value = false
            } else if (text.value?.length > 0) {
                emit('handleOk', {
                    filename: text.value + '.' + bookType.value,
                    bookType: bookType.value,
                })
            } else {
                createMessage.warning('名称不能为空！')
            }
        }
        const ExpXlsx = () => {
            visible.value = true
        }
        const handleChange = (e) => {
            bookType.value = e
        }
        return {
            ExpXlsx,
            visible,
            text,
            schma,
            handleclick,
            handleChange,
        }
    },
})
</script>

<style lang="less">
.fromRow {
  //  width:200px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: left;
  &_Col {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    margin: 5px 0;
    & > span:nth-of-type(1) {
      margin-right: 10px;
    }
  }
}
</style>
